<template>
  <div>
    <el-button type="primary" @click="show">
      查看模板json
    </el-button>
    <!-- <el-modal :visible="visible" :maskClosable="false"
             @cancel="hideModal"> -->
    <el-dialog v-model="visible" @close="hideModal" close-on-click-modal title="JOSN" draggable>
      <!-- <template slot="title">
        <el-space>
          <div style="margin-right: 20px">JSON</div>
          <el-switch checked-children="tid模式" un-checked-children="默认" v-model:checked="tidMode"
            @change="onModeChange" />
          <el-switch checked-children="美化" un-checked-children="压缩" v-model:checked="beautify" @change="onModeChange" />
        </el-space>
      </template> -->
      <template #header>
        <div class="dialog-header">
          <span style="font-size: 20px;margin: 0,20px;">JOSN</span>
          <el-switch v-model="tidMode" inline-prompt active-text="tid模式" inactive-text="默认" @change="onModeChange" />
          <el-switch v-model="beautify" inline-prompt active-text="美化" inactive-text="压缩" @change="onModeChange" />
        </div>
      </template>
      <!-- <el-spin :spinning="spinning" style="min-height: 100px"> -->
      <!-- <el-textarea style="width:40vw;height:50vh" v-model:value="jsonOut"/> -->
      <el-input style="width:100%" :rows="20" v-model="jsonOut" type="textarea" />
      <!-- </el-spin> -->
      
      <!-- <template slot="footer">
        <el-button key="close" type="info" @click="hideModal">
          关闭
        </el-button>
      </template> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="hideModal">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- </el-modal> -->
  </div>
</template>

<script>
export default {
  name: "JSONView",
  props: {
    template: {
      type: Object,
    }
  },
  data() {
    return {
      visible: false,
      spinning: true,
      jsonOut: "",
      tidMode: false,
      beautify: false,
      off1: false,
      off2: false,
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    hideModal() {
      this.visible = false
    },
    show() {
      this.visible = true
      this.spinning = true
      setTimeout(() => {
        let json = this.tidMode ? this.template.getJsonTid() : this.template.getJson();
        let beautify = this.beautify ? 2 : 0;
        this.jsonOut = JSON.stringify(json, null, beautify);
        this.spinning = false
      }, 500)
    },
    onModeChange() {
      this.show();
    }
  }
}

</script>
<style lang="less" scoped>
::v-deep .dialog-header {
  display: flex;
  span,.el-switch:first-child{
    margin-right: 20px;
  }
 
}
/deep/ .ant-modal-body {
  padding: 0px;
}

/deep/ .ant-modal-content {
  margin-bottom: 24px;
}
</style>
